<template>
  <el-row>
      <el-col :span="18">
        <el-form :inline="true" label-width="80px">
          <el-form-item label="类别">
            <el-select placeholder="请选择" class="width-160" v-model="category">
              <el-option v-for="item in category_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-select placeholder="请选择" class="width-100"></el-select>
          </el-form-item>
          <el-form-item label="类别">
            <el-input placeholder="请输入关键字" class="width-180"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" class="width-160">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
          <el-button type="danger" class="pull-right">新增</el-button>
      </el-col>
  </el-row>
  <el-table ref="table" border style="width: 100%;" :data="tableData" @selection-change="handlerSelectionChange">
    <el-table-column type="selection" width="40"></el-table-column>
    <el-table-column prop="name" label="标题" width="500"></el-table-column>
    <el-table-column prop="address" label="类别"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="address" label="操作" width="200">
      <template #default="scope">
        <el-button type="danger" size="small">编辑</el-button>
        <el-button size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row class="margin-top-30">
    <el-col :span="6">
      <el-button>批量删除</el-button>
    </el-col>
    <el-col :span="18">
      <el-pagination
        class="pull-right"
        size="small"
        background
        @size-change="handlerSizeChange"
        @current-change="handlerCurrentChange"
        :current-page="currentPage"
        :page-size="10"
        :page-sizes="[10, 20, 50, 100]"
        layout="[total, sizes, prev, pager, next, jumper]"
        :total="100"></el-pagination>
    </el-col>
  </el-row>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
name: 'NewsIndex',
setup () {
  const data = reactive({
    category: 0,
    category_options: [
      {
        label: "人工智能", value: 0
      },
      {
        label: "技术", value: 1
      }
    ],
    tableData: [
      {
        name: "王小虎", address: "山西省吕梁市阳城乡董家庄村", date: "2020-06-05 12:00:00"
      },
      {
        name: "王小虎", address: "山西省吕梁市阳城乡董家庄村", date: "2020-06-05 12:00:00"
      }
    ],
    currentPage: 1
  });
  
  // 多选事件
  const handlerSelectionChange = (val) => {
    return {
      data,
      handlerSelectionChange
    }
  };

  // 页码方法
  const handlerSizeChange =(val) => {

  };
  const handlerCurrentChange = (val) => {

  };
  return {
    ...toRefs(data),
    handlerSelectionChange,
    handlerSizeChange,
    handlerCurrentChange,
  };
},
}
</script>
<style scoped>
.width-160 {
  width: 160px;
}
.width-180 {
  width: 180px;
}
.width-100 {
  width: 100px;
}
</style>